<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>
            车名：<input v-model="userInfo.brand" type="text">
        </p>
        <p>
            车型：<input v-model="userInfo.series" type="text">
        </p>
        <p>
            生产日期：<input v-model="userInfo.creation" type="text">
        </p>
        <ul>
            <li v-for="(item,index) in arr" style="list-style: none;">
                {{item.brand}} --- {{item.series}} --- {{item.creation}}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                flag:"true",
                userInfo: {
                    brand: "",
                    series: "",
                    creation: ""
                },
                arr:[
                    {
                        brand: "奥迪",
                        series: "奥迪A4",
                        creation: "2021"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A6",
                        creation: "2021"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A8",
                        creation: "2022"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A4",
                        creation: "2020"
                    },
                    {
                        brand: "宝马",
                        series: "宝马666",
                        creation: "2019"
                    },
                    {
                        brand: "宝马",
                        series: "宝马666",
                        creation: "2020"
                    },
                    {
                        brand: "宝马",
                        series: "宝马bmw",
                        creation: "2022"
                    },
                    {
                        brand: "宝马",
                        series: "宝马bmw",
                        creation: "2019"
                    },
                ],
            },
            watch:{
                userInfo:{
                    deep:true,
                    handler(newValue,oldValue){
                        this.arr = this.arr.filter(item=>{
                            return item.brand.includes(newValue.brand) && item.series.includes(newValue.series) && item.creation.includes(newValue.creation)
                        }) 
                    }    
                }
            }
        })
    </script>
</body>
</html>